<template>
    <div class="page-cont">
        <div class="button-bar">
            <a-radio-group v-model:value="groupNum" buttonStyle="solid">
                <a-radio-button :value="0">1组</a-radio-button>
                <a-radio-button :value="1">2组</a-radio-button>
                <a-radio-button :value="2">3组</a-radio-button>
                <a-radio-button :value="3">4组</a-radio-button>
                <a-radio-button :value="4">5组</a-radio-button>
                <a-radio-button :value="5">6组</a-radio-button>
            </a-radio-group>
            <a-button type="primary">提交</a-button>
        </div>
        <div class="proc-cont">
            <div v-for="(item,i) in procScore[groupNum%6].segment" v-bind:key="i">
                <p>环节{{i+1}}</p>
                <a-input v-model:value="procScore[groupNum%6].segment[i]"></a-input>
            </div>
        </div>
        <div class="final-cont">
            <div>
                <div v-for="(item,i) in procScore[groupNum%6].dimension.slice(0,5)" v-bind:key="i">
                    <p>维度{{i+1}}</p>
                    <a-input v-model:value="procScore[groupNum%6].dimension[i]"></a-input>
                </div>
            </div>
            <div>
                <div v-for="(item,i) in procScore[groupNum%6].dimension.slice(5,10)" v-bind:key="i">
                    <p>维度{{i+1+5}}</p>
                    <a-input v-model:value="procScore[groupNum%6].dimension[i+5]"></a-input>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
let groupNum = ref(0);
let procScore = ref([]);
//总共6个组
for (let i = 0; i < 6; i++) {
    procScore.value.push(
    {
        //4环节(子任务)
        segment:[0,0,0,0],
        //10维度
        dimension:[0,0,0,0,0,0,0,0,0,0]
    });
}
</script>

<style scoped>
.page-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 40px;
    font-size: 18px;
}
.page-cont input{
    font-size: 18px;
}

.button-bar{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.proc-cont {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

.final-cont {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.final-cont>div{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

input{
    width: 140px;
}
</style>